<template>
  <div class="game-lists-container">
    <section class="game-lists">
      <ul>
        <li>
          <div class="game-item" v-if="game_arr[1] && game_arr[1].game_id">
            <a @click="jumpTo(game_arr[1].link)">
              <img src="https://img.wifenxiao.com/h5-wfx/images/game/game1.gif" width="100%" />
            </a>
            <p>{{game_arr[1].title}}</p>
          </div>
          <div class="game-item" v-else>
            <a href="javascript:;">
              <img src="https://img.wifenxiao.com/h5-wfx/images/game/game1_h.png" width="100%" />
            </a>
            <p>幸运大转盘</p>
          </div>
        </li>
        <li>
          <div class="game-item" v-if="game_arr[4] && game_arr[4].game_id">
            <a @click="jumpTo(game_arr[4].link)">
              <img src="https://img.wifenxiao.com/h5-wfx/images/game/game2.gif" width="100%" />
            </a>
            <p>{{game_arr[4].title}}</p>
          </div>
          <div class="game-item" v-else>
            <a href="javascript:;">
              <img src="https://img.wifenxiao.com/h5-wfx/images/game/game2_h.png" width="100%" />
            </a>
            <p>疯狂砸金蛋</p>
          </div>
        </li>
        <li>
          <div class="game-item" v-if="game_arr[3] && game_arr[3].game_id">
            <a @click="jumpTo(game_arr[3].link)">
              <img src="https://img.wifenxiao.com/h5-wfx/images/game/game3.gif" width="100%" />
            </a>
            <p>{{game_arr[3].title}}</p>
          </div>
          <div class="game-item" v-else>
            <a href="javascript:;">
              <img src="https://img.wifenxiao.com/h5-wfx/images/game/game3_h.png" width="100%" />
            </a>
            <p>好运翻翻看</p>
          </div>
        </li>
        <li>
          <div class="game-item" v-if="game_arr[7] && game_arr[7].game_id">
            <a @click="jumpTo(game_arr[7].link)">
              <img src="https://img.wifenxiao.com/h5-wfx/images/game/game7.gif" width="100%" />
            </a>
            <p>{{game_arr[7].title}}</p>
          </div>
          <div class="game-item" v-else>
            <a href="javascript:;">
              <img src="https://img.wifenxiao.com/h5-wfx/images/game/game7_h.png" width="100%" />
            </a>
            <p>刮刮乐</p>
          </div>
        </li>
        <li>
          <div class="game-item" v-if="game_arr[9] && game_arr[9].game_id">
            <a @click="jumpTo(game_arr[9].link)">
              <img src="https://img.wifenxiao.com/h5-wfx/images/game/game9.gif" width="100%" />
            </a>
            <p>{{game_arr[9].title}}</p>
          </div>
          <div class="game-item" v-else>
            <a href="javascript:;">
              <img src="https://img.wifenxiao.com/h5-wfx/images/game/game9_h.png" width="100%" />
            </a>
            <p>咻一咻</p>
          </div>
        </li>
        <li>
          <div class="game-item" v-if="game_arr[10] && game_arr[10].game_id">
            <a @click="jumpTo(game_arr[10].link)">
              <img src="https://img.wifenxiao.com/h5-wfx/images/game/game10.gif" width="100%" />
            </a>
            <p>{{game_arr[10].title}}</p>
          </div>
          <div class="game-item" v-else>
            <a href="javascript:;">
              <img src="https://img.wifenxiao.com/h5-wfx/images/game/game10_h.png" width="100%" />
            </a>
            <p>卡通机</p>
          </div>
        </li>
        <li>
          <div class="game-item" v-if="is_open_luobo">
            <a href="javascript:;" @click="Jump('radish-sprite')">
              <img src="https://img.wifenxiao.com/h5-wfx/images/game/game11.gif" width="100%" />
            </a>
            <p>萝卜精灵</p>
          </div>
          <div class="game-item" v-else>
            <a href="javascript:;">
              <img src="https://img.wifenxiao.com/h5-wfx/images/game/game11_h.png" width="100%" />
            </a>
            <p>萝卜精灵</p>
          </div>
        </li>
      </ul>
    </section>
    <section class="win_record">
      <!-- @click="Jump('prize-list')" -->
      <a href="javascript:;" @click="Jump('prize-list')">
        <img src="https://img.wifenxiao.com/h5-wfx/images/game/record.png" />
      </a>
    </section>
  </div>
</template>

<script>
import Vue from 'vue'
import { openPage } from '@/utils/utils'
import { getGameLists } from '@/api/marketGame/gameList'
// @/api/user/member/memberApi
export default Vue.extend({
  name: 'index',
  components: {},
  data() {
    return {
      game_arr: {},
      is_open_luobo: 1,
      luobo_url: '',
      record_url: ''
    }
  },
  methods: {
    jumpTo(link) {
      openPage(link)
    },
    Jump(url, data) {
      this.$JumpPath(this, url, data)
    },
    init() {
      this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 10000)
      getGameLists().then(res => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          const resData = res.data
          if (resData.ftitle_game) {
              wx.setNavigationBarTitle({
                title: resData.ftitle_game
              })
          }
          this.game_arr = resData.game_arr
          this.is_open_luobo = resData.is_open_luobo
          this.luobo_url = resData.luobo_url
          this.record_url = resData.record_url
        } else {
          this.$Error(res.msg)
        }
      })
    }
  },
  created() {
    this.init()
  }
})
</script>

<style lang="scss">
html,body {
  background-color: #fff;
}
.game-lists-container {
  .game-lists {
    overflow: hidden;
    padding: 10% 0;
    ul {
      text-align: center;
      li {
        display: inline-block;
        vertical-align: top;
        width: 30%;
        min-height: 180px;
        margin: 0 9%;
        overflow: hidden;
        margin-bottom: 10%;
        a {
          display: block;
          overflow: hidden;
        }
        p {
          line-height: 36px;
          text-align: center;
          font-size: 24px;
          margin-top: 20px;
        }
      }
    }
  }
  .win_record {
    text-align: center;
    margin: -40px 0 100px;
    a {
      width: 320px;
      display: inline-block;
      img {
        width: 100%;
      }
    }
  }
}
</style>